<template>
	<view class="content">
		<view class="image">
			<image class="image-content" :src="base64Image"></image>
		</view>
		<view class="code">
			<text class="f-s-14">{{code}}</text>
		</view>
		<scroll-view style="flex: 1;">
			<view class="action-btn-list">
				<view class="action-btn" @click="registerScannerBtn">
					<text class="f-s-12">注册扫描监听</text>
				</view>
				<view class="action-btn" @click="startDecodeBtn">
					<text class="f-s-14">开始扫码</text>
				</view>
				<view class="action-btn" @click="setOutputModeBtn">
					<text class="f-s-14">设置输出模式</text>
				</view>
				<view class="action-btn" @click="unRegisterScannerBtn">
					<text class="f-s-12">移除扫描监听</text>
				</view>
				<view class="action-btn" @click="stopDecodeBtn">
					<text class="f-s-14">停止扫码</text>
				</view>
				<view class="action-btn" @click="getOutputModeBtn">
					<text class="f-s-14">获取输出模式</text>
				</view>

				<view class="action-btn" @click="setTriggerModeBtn">
					<text class="f-s-14">设置触发模式</text>
				</view>

				<view class="action-btn" @click="openScannerBtn">
					<text class="f-s-14">打开扫描引擎</text>
				</view>
				<view class="action-btn" @click="unlockTrigglerBtn">
					<text class="f-s-14">启用扫描</text>
				</view>

				<view class="action-btn" @click="getTriggerModeBtn">
					<text class="f-s-14">获取触发模式</text>
				</view>
				<view class="action-btn" @click="closeScannerBtn">
					<text class="f-s-14">关闭扫描引擎</text>
				</view>
				<view class="action-btn" @click="lockTrigglerBtn">
					<text class="f-s-14">禁用扫描</text>
				</view>
				<view class="action-btn" @click="setPropertyIntsBtn">
					<text class="f-s-14">设置震动</text>
				</view>
				<view class="action-btn" @click="setPropertyIntsBtn1">
					<text class="f-s-14">设置声音</text>
				</view>
				<view class="action-btn" @click="getScannerStateBtn">
					<text class="f-s-14">获取属性</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		initScanner,
		registerScanner,
		unregisterScanner,
		openScanner,
		closeScanner,
		getCode,
		getImage,
		sendGetImage,
		setTriggerMode,
		getTriggerMode,
		startDecode,
		stopDecode,
		setOutputMode,
		getOutputMode,
		setParameterInts,
		setParameterString,
		getParameterInts,
		getParameterString,
		unlockTriggler,
		lockTriggler,
	} from "@/uni_modules/hh-ubx-pda";

	/**
	 * 输出模式
	 */
	const OutputModeList = ['intent输出 ', '键盘输出', 'intent和键盘同时输出'];

	/**
	 * 触发模式
	 */
	const TriggerModeList = ["短按触发解码或超时停止", "连扫模式", "长按触发，松开停止"];

	const list = ['关闭PDA扫码时的震动', '开启PDA扫码时的震动'];
	const list1 = ['无提示音', '短促', '尖锐'];
	const code = ref('');
	const base64Image = ref("");
	const init = () => {
		initScanner();
		openScanner();

		getCode(_code => {
			code.value = _code;
			sendGetImage();
		});
		getImage(_image => {
			base64Image.value = _image;
		});
	}

	const registerScannerBtn = () => {
		registerScanner();
		uni.showToast({
			title: "注册扫描监听",
			icon: "none",
			mask: false
		})
	}
	const unRegisterScannerBtn = () => {
		unregisterScanner();
		uni.showToast({
			title: "移除扫描监听",
			icon: "none",
			mask: false
		});
	}

	const openScannerBtn = () => {
		openScanner();
		uni.showToast({
			title: "打开扫描引擎",
			icon: "none",
			mask: false
		});
	}

	const closeScannerBtn = () => {
		closeScanner();
		uni.showToast({
			title: "关闭扫描引擎",
			icon: "none",
			mask: false
		});
	}

	const startDecodeBtn = () => {
		startDecode();
		uni.showToast({
			title: "开始扫码",
			icon: "none",
			mask: false
		});
	}

	const stopDecodeBtn = () => {
		stopDecode();
		uni.showToast({
			title: "停止扫码",
			icon: "none",
			mask: false
		});
	}

	const setOutputModeBtn = () => {
		uni.showActionSheet({
			title: "设置输出模式例子",
			itemList: OutputModeList,
			success: (a) => {
				setOutputMode(a.tapIndex);
				uni.showToast({
					title: "切换成功！",
					icon: "none",
					mask: false
				})
			}
		})
	}

	const setPropertyIntsBtn = () => {
		uni.showActionSheet({
			title: "设置震动",
			itemList: list,
			success: (a) => {
				const index = a.tapIndex;
				setParameterInts([7], [index]);
				uni.showToast({
					title: list[index],
					icon: "none",
					mask: false
				})
			}
		})
	}

	const setPropertyIntsBtn1 = () => {
		uni.showActionSheet({
			title: "设置声音",
			itemList: list1,
			success: (a) => {
				const index = a.tapIndex;
				const s = setParameterInts([6], [index]);
				uni.showToast({
					title: list1[index],
					icon: "none",
					mask: false
				})
			}
		})
	}

	const getOutputModeBtn = () => {
		uni.showToast({
			title: OutputModeList[getOutputMode()],
			icon: "none",
			mask: false
		})
	}

	const getScannerStateBtn = () => {
		const s = getParameterInts([7,6]);
		uni.showModal({
			title: "部分属性",
			content: `震动：${list[s[0]]}\n声音：${list1[s[1]]}`
			// content:`震动：${s[0]}`
		})
	}

	const unlockTrigglerBtn = () => {
		unlockTriggler();
		uni.showToast({
			title: "启用扫描",
			icon: "none",
			mask: false
		})
	}

	const lockTrigglerBtn = () => {
		lockTriggler();
		uni.showToast({
			title: "禁用扫描",
			icon: "none",
			mask: false
		})
	}

	const setTriggerModeBtn = () => {

		uni.showActionSheet({
			title: "设置触发模式",
			itemList: TriggerModeList,
			success: (a) => {
				const index = a.tapIndex;

				setTriggerMode(2 << index);
				const str = TriggerModeList[index];
				uni.showToast({
					title: `设置${str}成功`,
					icon: "none",
					mask: false
				})
			}
		})
	}

	const getTriggerModeBtn = () => {
		const mode = getTriggerMode();
		uni.showToast({
			title: `${TriggerModeList[mode >> 2]}`,
			icon: "none",
			mask: false
		})
	}

	onLoad(() => {
		init();
		registerScannerBtn();
	});
	onUnload(() => {
		unRegisterScannerBtn();
	});
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
	}

	.image {
		width: 100%;
		height: 100px;
		border: 1px solid rgb(41, 78, 162);

		>.image-content {
			width: 100%;
			height: 100%;
		}
	}

	.code {
		width: 100%;
		height: 35px;
		border: 1px solid rgb(41, 78, 162);
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.action-btn-list {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		>.action-btn {
			width: 30%;
			padding: 10rpx;
			background-color: blue;
			border-radius: 2px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1px solid #ccc;

			>.f-s-14,
			.f-s-12 {
				color: #fff;
			}

			// &:hover {
			// 	background-color: #fff;
			// }
		}
	}
</style>